import { Report } from "@/api/interface/iot";
import titleIcon from "@/assets/images/dashboard/icon-17.png";
import BaseChart from "@/components/Chart/BaseChart.vue";
import * as echarts from "echarts";
import { dayjs } from "element-plus";
import ItemBlock from "../components/item-block";
import { ComponentInternalInstance, getCurrentInstance } from "vue";
import "./left.scss";
export default defineComponent({
	emits: [],
	setup(props, { expose }) {
		const { proxy } = getCurrentInstance() as ComponentInternalInstance;
		let option = {
			tooltip: {
				trigger: "axis",
				formatter: "{b} <br/> {a}: {c} 条",
				axisPointer: {
					type: "shadow"
				}
			},
			toolbox: { show: false },
			legend: { show: false },
			grid: { top: "20px", left: "3%", right: "5%", bottom: "3%", containLabel: true },
			xAxis: [
				{
					axisLabel: { rotate: 0, color: "#555" },
					boundaryGap: true,
					type: "category",
					data: [] as any[]
				}
			],
			yAxis: [
				{
					splitLine: { show: true, lineStyle: { color: "#e8e8e8" } },
					type: "value",
					axisLabel: {
						formatter: `{value} 条`,
						fontWeight: 500,
						color: "#555"
					}
				}
			],
			series: [
				{
					name: "数量",
					type: "bar",
					itemStyle: {
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
							{ offset: 0, color: "#38cb80" },
							{ offset: 1, color: "#1f97ff" }
						])
					},
					emphasis: {
						//鼠标移动上去高亮
						focus: "series",
						blurScope: "coordinateSystem",
						itemStyle: {
							color: "#38cb80"
						}
					},
					data: [] as any[]
				}
			]
		};
		const chart = ref();
		const data = reactive({
			count: 0
		});
		const load = (res: any) => {
			let category: string[] = [];
			let seriesData: any[] = [];
			let count: number = 0;
			(res.result as Report.StatDataInfo[]).forEach(item => {
				category.push(dayjs(item.time).format("MM-DD"));
				seriesData.push(item.value);
				count += item.value;
			});
			data.count = count;
			option.xAxis[0].data = category;
			option.series[0].data = seriesData;
			chart.value.setChart(option);
		};

		const resize = () => {
			chart.value.resize();
		};
		expose({ resize, load });
		return () => {
			return (
				<ItemBlock class="forword-chart" title={proxy?.$t("index.chart_title.forword")}>
					{{
						unit: () => {
							return (
								<>
									<span class="value">{data.count}</span>
									<span>{proxy?.$t("index.chart_text.count")}</span>
								</>
							);
						},
						titleIcon: () => {
							return <el-image src={titleIcon} fil="cover" />;
						},
						default: () => {
							return <BaseChart ref={chart} dateType="line" width="100%" height="100%" />;
						}
					}}
				</ItemBlock>
			);
		};
	}
});
